{include file="common/head"}
<style>

</style>
<div class="search-container layui-form layui-padding-4" lay-filter="search">
    <div class="layui-inline">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-read"></i>
            </div>
            <input type="text" name="tap" id="tap" value="" placeholder="标签名称" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-clear">
            <button style="float: right;" class="layui-btn layui-btn-sm layui-bg-blue" id="search">搜索</button>
        </div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="add">添加标签</button>
  </div>
</script>
<script type="text/html" id="ID-table-demo-templet-switch">
    <input type="checkbox" name="status" value="{{= d.id }}" title="显示|" lay-skin="switch" lay-filter="demo-templet-status" {{= d.is_show ==1  ? "checked" : "" }}>
  </script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    <!-- <a class="layui-btn layui-btn-xs layui-bg-gray" lay-event="more">
      更多 
      <i class="layui-icon layui-icon-down"></i>
    </a> -->
  </div>
</script>

{include file="common/bottom"}
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var $ = layui.$
        $('#search').click(() => {
            let tap = $('#tap').val()
            if (tap == '') {
                table.reload('test', { where: { type: '' } })
            } else {
                table.reload('test', {
                    where: {
                        tap: tap
                    },
                })
            }

        })


        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/admin/tap/list',
            toolbar: '#toolbarDemo',
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.count, // 解析数据长度
                    "data": res.data.data
                };
            },
            height: 'full',
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
                // { type: 'checkbox' },
                { field: 'id', width: 80, title: 'ID', sort: true },
                { field: 'tap', width: 130, title: '名称' },
                { field: 'heat', title: '热度', width: 80, sort: true },
                { field: 'sort', width: 130, title: '排序', edit: 'sort' },
                { field: 'is_show', title: '是否展示', width: 130, templet: '#ID-table-demo-templet-switch' },
                { field: 'create_time', title: '发布时间', width: 150 },
                { field: 'update_time', title: '更新时间', width: 150 },
                { title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo' }
            ]],
            done: function () {
                var id = this.id;
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'all',
                        title: '展示全部'
                    }, {
                        id: 'top',
                        title: '置顶文章'
                    }, {
                        id: 'hot',
                        title: '加精文章'
                    }, {
                        id: 'heat',
                        title: '高浏览[>100]'
                    },],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'top':
                                table.reload('test', { where: { where: { is_top: 1 } } })
                                break
                        }
                    }
                })

            },
            error: function (res, msg) {
                console.log(res, msg)
            }


        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'add':
                    const ops = layer.open({
                        type: 1,
                        area: '400px',
                        title: '添加标签',
                        resize: false,
                        shadeClose: true,
                        closeBtn: 0,
                        content:
                            `
                  <div class="layui-form layui-form-pane"  lay-filter="addTap" style="margin: 16px;">
                    <div class="add-container">
                            <div class="layui-form-item">
                                    <label class="layui-form-label">标签名称</label>
                                    <div class="layui-input-block">
                                    <input type="text" name="tap" lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                                    </div>
                            </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否显示</label>
                                    <div class="layui-input-block">
                                    <input type="checkbox" name="is_show" lay-skin="switch"  title="ON|OFF" checked="">
                                    </div>
                                </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="addTap">添加标签</button>
                            </div>
                      </div>
                  </div>
                            `, success: () => {
                            form.render();
                            form.on('submit(addTap)', (data) => {
                                var field = data.field;
                                $.ajax({
                                    url: '/admin/tap/add'
                                    , type: 'post'
                                    , dataType: 'json'
                                    , data: field
                                    , success: (res) => {
                                        if (res.code) {
                                            layer.msg('操作成功')
                                            table.reload('test')
                                        } else {
                                            layer.msg(res.message, { icon: 5 })
                                        }
                                    }
                                })
                                layer.close(ops)
                                return false; // 阻止默认 form 跳转
                            })
                        }
                    })
                    break
                case 'delCheck':
                    var data = checkStatus.data;
                    var delId = ''
                    data.forEach((el) => {
                        delId += el.id + ','
                    })
                    layer.confirm('确定要删除选中的文章吗？', {
                        btn: ['确定', '取消'],
                    }, function () {
                        layer.msg('操作成功', { icon: 6 })
                        table.reload('test')
                        $.post('/admin/tap/del', { id: delId }, (res) => {
                            layer.msg('操作成功', { icon: 6 })
                            table.reload('test')
                        })

                    })
                    break
            };
        });


        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
                console.log(data.is_show);

                const ops = layer.open({
                    type: 1,
                    area: '400px',
                    title: '编辑标签',
                    resize: false,
                    shadeClose: true,
                    closeBtn: 0,
                    content:
                        `
                  <div class="layui-form layui-form-pane"  lay-filter="addTap" style="margin: 16px;">
                    <div class="add-container">
                            <div class="layui-form-item">
                                    <label class="layui-form-label">标签名称</label>
                                    <div class="layui-input-block">
                                    <input type="text" name="tap" lay-verify="required" placeholder="请输入分类名称" value="${data.tap}" autocomplete="off" class="layui-input">
                                    </div>
                            </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">是否显示</label>
                                    <div class="layui-input-block">
                                    <input type="checkbox" name="is_show" lay-skin="switch"  title="ON|OFF" ${data.is_show == 1 ? 'checked=""' : ''}>
                                    </div>
                                </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="editTap">立即修改</button>
                            </div>
                      </div>
                  </div>
                            `, success: () => {
                        form.render();
                        form.on('submit(editTap)', (val) => {
                            var field = val.field;
                            field['is_show'] = field.is_show ? 1 : 0
                            field['id'] = data.id
                            $.ajax({
                                url: '/admin/tap/update'
                                , type: 'post'
                                , dataType: 'json'
                                , data: field
                                , success: (res) => {
                                    if (res.code) {
                                        table.reload('test', { where: { a: 1 } })
                                        layer.msg('操作成功', { time: 500 })
                                    } else {
                                        layer.msg(res.message, { icon: 5 })
                                    }
                                }
                            })
                            layer.close(ops)
                            return false;
                        })
                    }
                })
            
            } else if (obj.event == 'del') {
                layer.confirm(`确定要删除标签[${data.tap}]吗？`, () => {
                    $.get('/admin/tap/del/', { id: data.id }, (res) => {
                        if (res.code == 200) {
                            layer.msg('删除成功', { time: 500 })
                            obj.del()
                        } else {
                            layer.msg('删除失败', { time: 500 })
                        }
                    })
                })
            }
        });
        // 复选框 批量删除
        table.on('checkbox(test)', function (obj) {
        });
        // 行单击事件
        table.on('row(test)', function (obj) {
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            var field = obj.field; // 得到字段
            var value = obj.value; // 得到修改后的值
            var data = obj.data; // 得到所在行所有键值
            // 值的校验
            if (field == 'sort') {
                var regPos = /^[0-9]+.?[0-9]*/
                if (!regPos.test(obj.value)) {
                    layer.tips('输入的排序格式应为数字', this, { tips: 1 });
                    return obj.reedit();
                } else {
                    $.ajax({
                        url: '/admin/tap/update'
                        , type: 'post'
                        , data: {
                            id: data.id
                            , sort: obj.value
                        }
                        , dataType: 'json'
                        , success: (res) => {
                            if (res.code == 200) {
                                layer.msg('修改成功', { icon: 6 })
                            } else {
                                layer.msg('修改失败', { icon: 5 })
                            }
                        }
                    })
                    table.reload('test', {
                        where: {
                        }
                    })
                }
            }

            layer.msg('编辑成功', { icon: 1 });

            // 其他更新操作
            var update = {};
            update[field] = value;
            obj.update(update);
        });
        form.on('switch(demo-templet-status)', function (obj) {
            var id = this.value;
            var is_show = obj.elem.checked ? 1 : 0
            $.post('/admin/tap/update', { id: id, is_show: is_show }, (res) => {
                if (res.code == 200) {
                    layer.msg('修改成功', { icon: 6 })
                } else {
                    layer.msg('修改失败', { icon: 5 })
                }
            })

        });
    });
</script>
</body>

</html>